<template>
  <div class="ysqxx-layout">
    <div
      class="layout-bg"
      :class="{'noside':!sideStatus}"
    />
    <!-- 两侧收起追加样式noside -->
    <img
      :src="require('@/assets/images/ysqxx/header.png')"
      class="layout-header"
    >

    <div class="layout-left" />
    <div class="layout-right" />
    <TimeInfo class="time-component" />
    <ManageInfo class="manage-component" />
    <BKMapDrawer
      ref="left"
      bottom="0"
      position="left"
      top="0"
      width="640"
      z-index="6"
      class="left-container"
    >
      <Left
        @changeLayerVisible="handleChangeLayerVisible"
      />
      <MapStaionSelect :class="{'no-side':!sideStatus}" />
    </BKMapDrawer>
    <BKMapDrawer
      ref="right"
      position="right"
      top="0"
      bottom=""
      width="640"
      z-index="6"
      class="right-container"
    >
      <MapLegend
        class="map-legend-panel"
        :class="{'no-side':!sideStatus}"
      />
      <RightMapMenu
        class="right-map-menu"
        :class="{'no-side':!sideStatus}"
      />
      <Right @changeLayerVisible="handleChangeLayerVisible" />
    </BKMapDrawer>
    <div
      class="layout-footer"
    />
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import TimeInfo from './components/business/time-info.vue'
import ManageInfo from './components/business/manage-info.vue'
import Left from './station/left/index.vue'
import Right from './station/right/index.vue'
import MapEventsMixins from '@/utils/mixins/map-events.mixins.js'
import MapMixins from '@/utils/mixins/map-one.mixins.js'
import MapLegend from './components/business/map-legend.vue'
import RightMapMenu from './components/business/right-icon-menu.vue'
import MapStaionSelect from './components/business/map-station-select.vue'
import { layKeyMap } from './variable'
export default {
  name: 'PictureLayout',
  components: { TimeInfo, ManageInfo, Left, Right, MapLegend, RightMapMenu, MapStaionSelect },
  mixins: [MapEventsMixins, MapMixins],
  data () {
    this.layKeyMap = layKeyMap
    return {
      typeList: [
        {
          label: '降雨分布',
          class: 'rain'
        }, {
          label: '河道水情',
          class: 'river'
        }, {
          label: '水库水情',
          class: 'reservoir'
        }
      ],
      legends: [
        { type: 'rect', color: '#e04545', fillColor: '224,69,69', layerId: 'ysqxx_SWSW', name: '水文水位站', groupName: '业务图层', isClick: true, needCluster: true },
        { type: 'rect', color: '#7019ff', fillColor: '112,25,255', layerId: 'ysqxx_SQ', name: '墒情站', groupName: '业务图层', isClick: true, needCluster: true },
        { type: 'rect', color: '#1cb55b', fillColor: '28,181,91', layerId: 'ysqxx_SZ', name: '水质站', groupName: '业务图层', isClick: true, needCluster: true },
        { type: 'rect', color: '#1cb55b', fillColor: '28,181,91', layerId: 'ysqxx_DXS', name: '地下水站', groupName: '业务图层', isClick: true, needCluster: true }
      ],
      sideStatus: true
    }
  },
  async mounted () {
    await this.getStationTypeList()
    await this.getWatershedZones()
    await this.getAdminAreas()
  },

  created () {
    this.$root.$on('selectTableStation', this.handleSelectTableStation)
    this.$root.$on('toggleSide', this.toggleSideExpand)
    this.$root.$on('mapStationPointSearch', this.getMapData)
  },
  beforeDestroy () {
    this.$root.$off('selectTableStation', this.handleSelectTableStation)
    this.$root.$off('toggleSide', this.toggleSideExpand)
    this.$root.$off('mapStationPointSearch', this.getMapData)
  },
  computed: {
    ...mapState('ysqxx', ['visibleLayerMap'])
  },
  methods: {
    ...mapActions({
      getStationTypeList: 'ysqxx/getStationTypeList',
      getWatershedZones: 'ysqxx/getWatershedZones',
      getAdminAreas: 'ysqxx/getAdminAreas'
    }),
    async initLayersAndMenus () {
      await this.createLayers()
      await this.getMapData()
    },
    toggleSideExpand (sideStatus) {
      console.log({ sideStatus })
      this.sideStatus = sideStatus
      this.$nextTick(() => {
        this.$refs.left.toggleExpand()
        this.$refs.right.toggleExpand()
      })
    },
    async handleChangeLayerVisible (layId, visible) {
      if (!this.ysqxxLayersLoaded) return
      this.$mapManager.invoke('closePopup')
      const layIds = this.legends.map(item => item.layerId).join(',')
      // const visible = !this.visibleLayerMap[layId]
      if (visible) {
        await this.$mapManager.invoke('setLayerVisible', layIds, false)
        await this.$mapManager.invoke('setLayerVisible', layId, visible)
      } else {
        await this.$mapManager.invoke('setLayerVisible', layIds, true)
      }
      this.$mapManager.emit('updateLayer')
    },
    async handleSelectTableStation ({ coordinate, row, layerId }) {
      const layer = await this.$mapManager.invokeUtils('getLayer', layerId)
      const [feature] = layer.getSource().getFeaturesAtCoordinate(coordinate)
      if (!feature) {
        console.log({ feature, layer, row, coordinate })
        this.$message.warning('该测站经纬度为空')
        return
      }
      this.$root.$emit('clearOtherActiveRow', layerId)
      this.$mapManager.invoke('setLayerVisible', layerId, true)
      await this.$mapManager.invoke('setCenterAndZoom', coordinate, 17, false)
      setTimeout(() => {
        this.$mapManager.invoke('selectFeature', feature)
      }, 400)
    },
    async getMapData (callback) {
      this.$mapManager.invoke('clearSelectStyle')
      const pointData = await this.getGeoByParams()
      // 清空当前图层
      const layers = this.legends.map(item => item.layerId)
      layers.forEach(async (layId) => {
        await this.clearLayerById(layId)
        const key = this.layKeyMap ? this.layKeyMap[layId] : ''
        const result = pointData.filter(item => key === item.LX)
        const imgId = layId.endsWith('_cluster') ? layId.split('_')[0] : layId

        if (result.length < 1000) {
          this.renderMapPoints(result, layId, imgId)
        } else {
          for (let i = 0; i < result.length; i = i + 1000) {
            this.renderMapPoints(result.slice(i, i + 1000), layId, imgId)
          }
        }
      })
      callback && callback()
    }
  }
}
</script>
<style lang="scss">
@import "../../../assets/styles/ysqxx";
</style>
<style lang="scss" scoped>
.time-component {
  position: absolute;
  left: 43px;
  top: 17px;
  z-index: 10;
}

.manage-component {
  position: absolute;
  right: 34px;
  top: 25px;
  z-index: 10;
  pointer-events: all;
}

.ysqxx-layout {
  background-color: transparent;
}

.layout-bg {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("~@/assets/images/ysqxx/dark_bg.png") no-repeat left top;
  background-size: 100% 100%;
  pointer-events: none;

  &.noside {
    background: url("~@/assets/images/ysqxx/dark_bg_noside.png") no-repeat left top;
    background-size: 100% 100%;
  }
}

.layout-header {
  // background: url("~@/assets/images/ysqxx/header.png") no-repeat left top;
  // background-size: 100% 100%;
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
  z-index: 10;
  pointer-events: none;
}

.layout-footer {
  background: url("~@/assets/images/ysqxx/footer.png") no-repeat left top;
  background-size: 100% 100%;
  height: 20px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8;
}

.left-container {
  padding: 83px 58px 21px 41px;
  pointer-events: none;
  border: 0;
  transition: left 0.5s;

  div {
    z-index: 10;
  }

  &.bk-map-drawer.left-drawer.drawer-expanded {
    border: none;
    left: 0 !important;
  }

  ::v-deep .drawer-sidebar {
    display: none;
  }

  &::after {
    content: "";
    // background: url("~@/assets/images/ysqxx/left-bg.png") no-repeat left top;
    // background: #032654;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 640px;
    z-index: -1;
    pointer-events: none;
  }

  .full-box.d-flex-c {
    pointer-events: all;
  }
}

.right-container {
  padding: 83px 41px 21px 58px;
  pointer-events: none;
  border: 0;
  transition: right 0.5s;

  &.bk-map-drawer.right-drawer.drawer-expanded {
    border: none;
    right: 0 !important;
  }

  ::v-deep .drawer-sidebar {
    display: none;
  }

  &::after {
    content: "";
    // background: url("~@/assets/images/ysqxx/right-bg.png") no-repeat left top;
    // background: linear-gradient(90deg, transparent 0%, #032654 98%, #032654 100%);
    background-size: 100% 100%;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 640px;
    z-index: -1;
    pointer-events: none;
  }

  .full-box.d-flex-c {
    pointer-events: all;
  }
}

.layout-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 117px;
  height: 100%;
  z-index: 12;
  background: url("~@/assets/images/ysqxx/left-border.png") no-repeat left top;
  background-size: 100% 100%;
  pointer-events: none;
}

.layout-right {
  position: absolute;
  right: 0;
  top: 0;
  width: 117px;
  height: 100%;
  z-index: 12;
  background: url("~@/assets/images/ysqxx/right-border.png") no-repeat right top;
  background-size: 100% 100%;
  pointer-events: none;
}

.layout-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 105px;
  z-index: 3;
}

.map-legend-panel {
  position: absolute;
  right: 594px;
  bottom: 20px;
  pointer-events: all;
}

.right-map-menu.no-side,
.map-legend-panel.no-side {
  right: 670px;
}

.right-map-menu {
  position: absolute;
  right: 594px;
  top: 90px;
  height: auto;
  pointer-events: all;
}
</style>
